<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style type="text/css">

        * { margin:0; padding:0;}

        body { font-size:12px;}

        p{ margin: 5px;}

        .box{ padding: 10px;}

    </style>

    <!--   引入jQuery -->

    <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function(){

            $(window).bind('scroll',function(){show()});

            function show()

            {

                if($(window).scrollTop()+$(window).height()>=$(document).height())

                {

                    ajaxRead();

                }

            }

            function ajaxRead()

            {

                var html="";

                $.ajax({

                    type:'get',

                    dataType:'jsonp',

                    url:'http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?',

                    beforeSend:function(){console.log('loading...')},

                    success:function(data){

                        $.each(data.items,function(i,item){

                            html+='<div class="box">';

                            html+='<h1>'+item.title+'</h1>';

                            html+='<a hreft="'+item.link+'"><img src="'+item.media.m+'"/></a>'

                            html+='<div>'+item.tags+'</div>';

                            html+='</div>';

                        });

                        $("#resText").append($(html));

                    },

                    complete:function(){console.log('mission acomplete.')}

                });

            }

        })

    </script>

</head>

<body>

<p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p>

<div id="resText" >

</div>

</body>

</html>